<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

        <button>开始</button>
        <button>暂停</button>
       <div style='width: 100px;height: 100px;background-color: hotpink;position: absolute;left:100px;top:100px'></div>
    
</body>
</html>
<script>
//获得按钮对象的集合
let btnList = document.querySelectorAll('button');
//获得div节点
let divObj = document.querySelector('div');
//记录事件编号
let timeId=null;
//获得浏览器的可视宽度
let clientWd = document.documentElement.clientWidth;
//获得div的宽度
let div_width = parseInt(divObj.style.width);


//开始
btnList[0].onclick=()=>{

   window.setInterval(()=>{
      //获得left的值
      let left_value =parseInt(divObj.style.left);
      
      if(left_value<=clientWd-div_width){
        left_value+=10;
      }else{
        left_value-=10; 
      }
    
      divObj.style.left=left_value+'px';

   },100);

}

//暂停
btnList[1].onclick=()=>{

}

 


</script>